<template>
<div class="pmarket-detail">

  <!-- <Header :bgcolor="'rgba(0,0,0,.8)'" /> -->

  <div class="module-show margin-xauto">
    <!-- 面包线标题 -->
    <div class="news-title">
      <span class="hand" @click="jump">作品市场首页</span>
      <span class="mgl5 fc-b1">></span>
      <span class="mgl5 fc-b1">{{model.name}}</span>
    </div>

    <!-- 详情 -->
    <div class="news-content flex jc-between">
      <div class="news-content-left">
        <iframe :src="model.pureview_url" frameborder="0" style="width: 100%;height:535px;"></iframe>
        <i class="iconfont icon-quanping hand" @click="previewUrl(model)"></i>
      </div>
      <div class="news-content-right">
        <p class="fs-xl mgb2 strong fc-b1 omit">{{model.name}}</p>
        <p class="fc-b1 mgb2 fs-m">价格 <span class="fs-xl" style="color: #f00;"> ¥{{model.price}}</span></p>
        <p class="fc-b1 mgb2 fs-m"><i class="iconfont icon-denglu mgr5 fs-m"></i>作者：{{model.nickname}}</p>
        <p class="fc-b1 mgb2 fs-m"><i class="iconfont icon-dingwei mgr5 fs-m"></i>地区：{{model.city}}</p>
        <p class="fc-b1 fs-m"><i class="iconfont icon-paishe mgr5 fs-m"></i>拍摄：{{model.shoot_type_text}}</p>
        <div class="sort-tag">
          <p class="strong fc-b1 mgb5 fs-m">标签</p>
          <p class="fc-b2 fs-n">{{model.pano_type_text}}</p>
        </div>
        <div class="add-cart hand fs-l" @click="addCart"><i class="iconfont icon-cart mgr5 fs-l"></i> 加入购物车</div>
      </div>
    </div>

    <!-- 相似作品 -->
    <div class="new-more min-h300">
      <h2 class="fc-b1 fs-b strong">相似作品</h2>
      <PmarketList :list="list" v-if="list.length>0" />
      <div class="null tac" v-else>暂无数据</div>
    </div>
  </div>
  
  <Aside />

  <Footer />

</div>
</template>

<script>
export default {
  components: {
    Header: _ => import('@/components/common/Header'),
    Footer: _ => import('@/components/common/Footer'),
    PmarketList: _ => import('@/components/common/PmarketList'),
    Aside: _ => import('@/components/common/Aside'),
  },
  data() {
    return {
      opts: {
        pageIndex: 1,
        pageSize: 8,
        pano_type: -1,
        keyword: '',
      },
      list: [],
      model: {}
    }
  },
  methods: {
    // 预览
    previewUrl(item) {
      window.open(item.panoview_url)
    },
    // 加入购物车
    addCart() {
      console.log(this.model)
      this.$api.addCartProduct(this.model.id).then(res => {
        // console.log(res)
        if (res.code == 100) {
          this.$vgo.tip('操作成功', 'success')
          this.$store.dispatch('getCartList')
        }
      })
    },
    // 获取相似内容列表
    getList() {
      this.$api.getPmarketList(this.opts).then(res => {
        console.log(res)
        if (res.code == 100) {
          if (res.data && res.data.list && res.data.list.length > 0) {
            let list = res.data.list.filter(item => item.id != this.$route.params.id)
            this.list = list
          } else {
            this.list = []
          }
        }
      })
    },
    // 详情页
    getDetail(id) {
      this.$api.getPmarketDetailData(id).then(res => {
        console.log(res)
        if (res.code == 100) {
          this.model = res.data
          this.opts.pano_type = res.data.pano_type
          this.getList()
        }
      })
    },
    // 跳转
    jump() {
      this.$router.push({name: 'panomarket'})
    },
    // 回到顶部
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      // if (that.scrollTop > 60) {
      //   that.btnFlag = true
      // } else {
      //   that.btnFlag = false
      // }
    },
  },
  watch: {
    '$route.params.id': {
      handler(val) {
        console.log(val)
        this.getDetail(val)
        this.backTop()
      },
    }
  },
  created() {
    // console.log(this.$route.params)
    if (this.$route.params && this.$route.params.id) {
      this.getDetail(this.$route.params.id)
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
}
</script>

<style lang="stylus" scoped>
.pmarket-detail
  width 100%
  min-width 1200px
  .module-show
    width 1200px
  .news-title
    margin-top 80px
    margin-bottom 20px
  .news-content
    padding 20px 0 50px
    margin-bottom 20px
    .news-content-left
      width 60%
      position relative
      .icon-quanping
        font-size 22px
        position absolute
        right 10px
        top 10px
    .news-content-right
      width 35%
      .sort-tag
        margin-top 70px
        height 100px
      .add-cart
        padding 10px 15px
        background var(--themeColor)
        opacity 0.8
        color #fff
        width 150px
        margin-top 150px
        text-align center
        &:hover
          opacity 1
  .new-more
    margin-bottom 50px
    padding 20px 0
</style>
